<template>
  <div class="containner">
    <!-- <div class="toolbar">
      <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleClickAdd">习题库</el-button>
    </div> -->
    <el-tabs v-model="activeName" @tab-click="handleClickTab">
      <el-tab-pane :label="item.title" :name="item.title" v-for="(item, key) in tabs" :key="key">
        <template v-if="item.type != 2">
          <add-course v-if="hasData" @close="closeCourse" :review-list="list" :type="type" :disabled="true"
            :show-dialog="false" :title="dialogTitle"></add-course>
          <div class="empty" v-if="!hasData">暂无数据 ~</div>
        </template>
        <template v-if="item.type === 2">
          <video-view ref="videoView" :review-list="list" v-if="hasVideo"></video-view>
          <video-view ref="videoView"  v-else="!hasVideo"></video-view>
        </template>

        <div class="edit-button">
          <el-button v-if="type !== 2" type="primary" size="big" icon="el-icon-edit" @click="handleClickEdit">
            习题库
          </el-button>
        </div>

      </el-tab-pane>
    </el-tabs>

    <add-course v-if="showCourse" @close="closeCourse" :review-list="list" :type="type" :disabled="false"
      :show-dialog="true" :title="dialogTitle" @success="onSuccess"></add-course>
  </div>
</template>

<script>
import AddCourse from './components/AddCourse.vue';
import VideoView from './components/VideoView.vue'
import { cocourseQuestions } from "@/api/course";
export default {
  components: {
    AddCourse,
    VideoView
  },
  computed: {
    hasData() {
      return this.list.length > 0
    },
    hasVideo(){
      return this.list.length > 0 && this.list[0].question_stem
    }
  },
  data() {
    return {
      dialogTitle: '习题库',
      showCourse: false,
      showAddCourse: false,
      id: this.$route.query.id,
      type: 1,
      activeName: '课前习题',
      disabled: true,
      list: [],
      tabs: [
        {
          title: '课前习题',
          type: 1,
        },
        {
          title: '学习',
          type: 2,
        },
        {
          title: '课后习题',
          type: 3,
        }
      ]
    }
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await cocourseQuestions({
        id: this.id,
        type: this.type
      })
      this.list = res.data;
    },
    closeCourse() {
      this.showCourse = false;
    },
    handleClickEdit(item) {
      this.showCourse = true;
    },
    handleClickAdd(item) {
      this.showCourse = true;
    },
    handleClickLook() {
      this.showCourse = true;
    },
    handleClickTab(tab) {
      this.type = this.tabs[tab.index].type;
      this.getList()
    },
    onSuccess() {
      this.closeCourse();
      this.getList()
    }
  },
}
</script>
<style lang="scss" scoped>
.containner {
  padding: 30px;
  padding-bottom: 100px;
}

.toolbar {
  background-color: #fff;
  margin-bottom: 20px;
}

.empty {
  padding: 50px;
  text-align: center;
  color: #333
}

.edit-button {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 20px;
  text-align: center;
  background-color: #fff;
  z-index: 99;
  border-top: 1px solid #eee
}
</style>
